import { defineComponent, ref, reactive, onMounted, nextTick } from 'vue'
import { useStore } from 'vuex'
import { ElCard, ElSwitch, ElInput, ElMessage } from 'element-plus'
// import { Plus } from '@element-plus/icons-vue'

import type { FormValuesType } from './typings'
import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'
import type { fnStateEnum } from '~/store/monitor/typings'

import ProSaasTable from '~/components/ProSaasTable'
import useVuexGetters from '~/hooks/useVuexGetters'

// 单灯警报设置
export default defineComponent(function LampAlarSet() {
  const store = useStore()
  const proSaasTableRef = ref<ProSaasTableExposeType>()
  const formValues = reactive<FormValuesType>({})

  const alarmState = useVuexGetters('singleLamp', [
    'alarmLevelOpt',
    'alarmLevelNum',
    'alarmTypeOpt',
    'alarmTypeNum'
  ])

  const filterLevel = (str?: string) => {
    return alarmState.alarmLevelOpt.value.filter((item: fnStateEnum) => item.dictKey === str)[0]
      .dictValue
  }
  const filterType = (str?: string) => {
    return alarmState.alarmTypeOpt.value.filter((item: fnStateEnum) => item.dictKey === str)[0]
      .dictValue
  }
  const columns: TableColumnProps<FormValuesType>[] = [
    {
      label: '警报名称',
      prop: 'alarmName',
      minWidth: 180,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true,
      disabled: true
    },
    {
      label: '警报等级',
      prop: 'alarmLevel',
      minWidth: 180,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true,
      disabled: true,
      render: ({ row }) => <div>{filterLevel(row.alarmLevel)}</div>
    },
    {
      label: '警报类型',
      prop: 'alarmType',
      minWidth: 180,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true,
      disabled: true,
      render: ({ row }) => <div>{filterType(row.alarmType)}</div>
    },
    {
      label: '排序',
      prop: 'sort',
      minWidth: 180,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true,
      disabled: true,
      render: ({ row }) => (
        <ElInput v-model={row.sort} onChange={() => handleChangeEnabled(row)} type="number" />
      )
    },
    {
      label: '是否启用',
      prop: 'enabled',
      minWidth: 180,
      align: 'center',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true,
      disabled: true,
      render: ({ row }) => (
        <ElSwitch
          v-model={row.enabled}
          active-value={1}
          inactive-value={0}
          onChange={() => handleChangeEnabled(row)}
        />
      )
    }
  ]

  const handleChangeEnabled = async (row: FormValuesType) => {
    const params = { ...row }
    const { code } = await store.dispatch('singleLamp/LampAlarmUpdate', params)
    if (code === 200) {
      ElMessage({
        message: '操作成功',
        type: 'success',
        duration: 2000
      })
      nextTick(proSaasTableRef.value!?.toSearch)
    }
  }
  onMounted(() => {
    // 警报等级
    store.dispatch('singleLamp/AlarmLevelGet', { code: 'device_alarm_level' })
    // 警报类型
    store.dispatch('singleLamp/AlarmTypeGet', { code: 'device_alarm_type' })
  })

  return () => (
    <ElCard>
      {
        <ProSaasTable<FormValuesType>
          tableId="monitor_lampAlarmSet_index"
          ref={proSaasTableRef}
          columns={columns}
          searchParams={formValues}
          hasSelection
          dispatchType="singleLamp/LampAlarmPage"
          searchFormProps={{
            model: formValues
          }}
        />
      }
    </ElCard>
  )
})
